<template>
    <!-- 第三方分享(只有app端才显示) -->
    <div class="popup-box">
        <div class="popup-tit">
            <em class="tit">分享商品</em>
            <i class="close close-pop"></i>
        </div>
        <div class="share-goods">
            <!-- <div class="share-des">可以通过QQ、微信、微博分享你的商品</div> -->
            <div class="share-way">
                <dl class="item" @click.stop="appShareGoods('qq')">
                    <dt class="img"><img src="static/images/ext-qq.png" /></dt>
                    <dd class="txt">QQ好友</dd>
                </dl>
                <dl class="item" @click.stop="appShareGoods('weixin')">
                    <dt class="img"><img src="static/images/ext-wx.png" /></dt>
                    <dd class="txt">微信好友</dd>
                </dl>
                <dl class="item" @click.stop="appShareGoods('weixinPY')">
                    <dt class="img"><img src="static/images/ext-pyq.png" /></dt>
                    <dd class="txt">朋友圈</dd>
                </dl>
                <dl class="item" @click.stop="appShareGoods('sinaweibo')">
                    <dt class="img"><img src="static/images/ext-wb.png" /></dt>
                    <dd class="txt">新浪微博</dd>
                </dl>
                <dl class="item" @click.stop="appShareGoods('systemShare')">
                    <dt class="img"><img src="static/images/ext-link.png" /></dt>
                    <dd class="txt">更多分享</dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
import shareService from 'service/share';
import config from 'config/config';
export default {
	props: {
		name: String,
        shopName:String,
        prodPics:Array,
	},
    methods: {
        //第三方分享(只有app端才显示)
        appShareGoods(provider) {
            this.$toast.loading({mask: true,message: '正在分享...'});
            //拼出第三方分享发出的链接(只有APP下可用)
            let shareUrl = config.url + this.$route.path + '?' + window.location.href.split('?')[1];
            let msg = {};
            if (provider == 'qq') {
                msg = {
                    type: 'image',//text的话不会缩略图，web的话会报参数错误
                    title: this.name, //分享消息的标题----微信必填，QQ必填(最长30个字符)
                    href: shareUrl, //分享独立的链接----微信、微博必填，QQ安卓端(IOS端非必填)必填
                    content: this.shopName, //分享消息的文字内容----微信必填
                    pictures:[config.photoServer + this.prodPics[0]],
                    thumbs: [config.photoServer + this.prodPics[0]] //分享消息的缩略图----微信必填
                };
            } else if (provider == 'weixin') {
                msg = {
                    type: 'web',
                    href: shareUrl, //分享独立的链接----微信、微博必填，QQ安卓端(IOS端非必填)必填
                    title: this.name, //分享消息的标题----微信必填，QQ必填(最长30个字符)
                    content: this.shopName, //分享消息的文字内容----微信必填
                    thumbs: [config.photoServer + this.prodPics[0]], //分享消息的缩略图----微信必填
                    extra: { scene: 'WXSceneSession' } //加这个才是发微信朋友，不加就是发朋友圈
                };
            } else if (provider == 'weixinPY') {
                provider = 'weixin'; //只能传weixin过去，传weixinPY的话会报错
                msg = {
                    type: 'web',
                    href: shareUrl, //分享独立的链接----微信、微博必填，QQ安卓端(IOS端非必填)必填
                    title: this.name, //分享消息的标题----微信必填，QQ必填(最长30个字符)
                    content: this.shopName, //分享消息的文字内容----微信必填
                    thumbs: [config.photoServer + this.prodPics[0]] //分享消息的缩略图----微信必填
                };
            } else if (provider == 'sinaweibo') {
                //微博只能接这几个参数，传错参数的话会报错。type：image的话会报错，暂不知为什么不能传image
                msg = {
                    type: 'web',
                    href: shareUrl, //分享独立的链接----微信、微博必填，QQ安卓端(IOS端非必填)必填
                    content: this.name //分享消息的文字内容----微信必填
                };
            }else{
                //调用系统分享
                msg = {
                    type: 'web',
                    content: this.name, //分享消息的文字内容
                    href: shareUrl, //分享独立的链接-
                };
            }
            shareService.shareWeb(provider, msg).then(res => {
                if (res.success) {
                    //如果分享成功
                    this.showShare = false; //这段代码是当用自写的分享组件时才用得上
                    if (res.msg) { //因为微信及系统分享不toast，所以要先判断
                       this.$toast(res.msg);
                    }
                } else {
                    //如果分享不成功
                    this.$toast(res.msg);
                }
            });
        },
    },

};
</script>

<style src="../../assets/css/popup.css" scoped></style>
<style lang="stylus" scoped>
.share-goods {
    min-height: 100px;
    .share-des {
        padding: 0 15px;
        color: #999;
        line-height: 20px;
        font-size: 12px;
        margin-top: 15px;
    }
    .share-way {
        display: flex;
        .item {
            flex: 1;
            text-align: center;
            padding: 15px 0 15px;
            .img {
                border-radius: 50%;
                width: 37px;
                height: 37px;
                line-height: 50px;
                margin: auto;
                font-size: 0;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .txt {
                margin-top: 10px;
                font-size: 10px;
            }
        }
    }
}
</style>
